Officer, I've Been Framed!
I used to hate sites that used frames. They made a page look bulky, amateurish, and in most cases ugly. Whenever I came across a page that used frames, those huge thick gray dividers across my browser's face and the multitude of scroll bars pointing every which way would make me quit my browser immediately in a fit of disgust.
But then web designers smartened up. The pages with the ugly navigational sidebar frames, that had horizontal scroll bars and took up half of your screen, started getting replaced by pages with small, seamless sidebar frames. Pages that once made you cringe in horror at the number of panes that got shoved in your face started to ease up on their use of frames. Frames actually started making pages look better.
Now the sixty-four thousand dollar question is: how do you use frames to enhance your visitor's experience?
Technical Jibber-Jabber
You should already have the ability to create frames (HTML Toolbox, Feb/99). Now we will learn how to manipulate pages in frames using links.
Let's say you've developed a beautiful sidebar for your website. You then build a finely crafted index file that defines the frameset for your page, and load it up. You eagerly click a link on your sidebar, just teeming with anticipation of how cool it will look when the link loads in the main frame. Oh no! The page didn't load in the main frame, it loaded in the sidebar frame, replacing the sidebar you so delicately developed.
To solve this problem, you need to specify a TARGET in your links on your sidebar page. Your TARGET attribute's value should be the name of the frame you want the link to load in. For example, if this were your index page:
My Webpage
And if this were your (very simple) menu sidebar (sidebar.html):
Sidebar
My Cars Page
My Dogs Page
When you click the link to either your cars page or your dogs page, it will load in the sidebar's frame (thus replacing the sidebar itself). With one simple addition to the code's anchor tags, this problem may be overcome:
My Cars Page
My Dogs Page
Using these links on your sidebar will make the new pages load in the frame called "mainframe" (defined in the FRAMESET). You can assign any name you want to frames, and have links from any frame on your page to any other frame on the same page. Note that you can't, however, load links from frames defined in one HTML document, into frames defined in a different HTML document.
A Magical Land of Fairies, Gnomes, and Special Target Names
Being able to target specific frames, which you've defined, is all fine and dandy, but what if you want to load a link over top of all your frames instead of in one specific frame? Or what if you want to load a page in an entirely new window? Or what if you want to fly away to a land of eternal youth where the people are nice, the music is good, and the water tastes like Cherry Coke?
Well, all but one of these tasks can be accomplished by using one of several special TARGETs in your links:
_blank Loads your link in a new blank window.
_self Loads in the same window that the anchor was clicked in.
(This may sound useless to you now, but I'll get back to it).
_parent This will load the link in the same frame or window that it's
immediate FRAMESET parent is in.
_top This will make the link load in the full body of the window.
You can use this to break out of all parent FRAMESETs.
To illustrate, if we were to change the cars link in my example sidebar above to this:
My Cars Page
When you click that link, the cars page will load in the entire window, replacing both the sidebar frame and the main frame that I had created in my example index file.
Keep Your Bases Covered
In the example of a sidebar, chances are that every link you make will need to be targeted to your main content area. Adding the TARGET tag to every one of your anchors will get tedious when dealing with sidebars with lots of links. Who wants to be adding TARGET tags when you could be spending that time eating pizza or drinking chocolate milk?
Fortunately, there is a better way. With one single tag you can create a page on which every link will have a specific target, without needing their own individual TARGET tags. To do this you use the BASE tag and it's TARGET attribute.
The BASE tag must be defined within the HEAD section of your HTML document. It should look like this:
Sidebar
:
Using the BASE tag and TARGET attribute in the above manner will cause all of the links on that page to target the frame "mainframe" by default. If you do include a TARGET attribute in an anchor, that TARGET attribute will override the BASE TARGET attribute. That is where the _self value comes in handy — it can be used to override the BASE tag and make the link act like a normal one.
The other attribute that can be used with the BASE tag is HREF. Making an HREF attribute will allow you to change the URL used when resolving relative path names on your page. Let's say, for instance, your page is located at http://www.mysite.com/ . If you were to use this link:
My Cars Page
You would be taken to http://www.mysite.com/cars.html. However, if you were to include this in your page's head section:
Then the link I mentioned above would take you to http://www.yoursite.com/cars.html. This works the same for referencing image locations in IMG tags.
Stay Calm, Be Cool
It's very easy to get carried away with frames. Adding frames to each edge of the browser, then adding frames within frames within frames — it's quite easy to end up with a page that is about as easy and fun to navigate as it is to sit through 24 straight hours of the shopping channel (when it should be as fun as watching people win $1 million with Regis Philbin).
The best advice I can give is use frames with discretion. Your ultimate goal should be to make a page that you can't tell uses frames just by looking at it.
Rudi Muiznieks
rudi@applewizards.net